import React from "react";
import {  useNavigate } from "react-router-dom";
import data from "./menu-data";
import "./index.css";

function Menubar() {
  let navigate = useNavigate();
  const toPage = (path) => {
    navigate(`/${path}`, { state: path });
  };
  const menus = data;
  return (
    <header className="menubar">
      <section className="menubar-wrapper fixed">
        <div className="container">
          <b className="logo">夕夜の博客</b>
          <section className="navs-wrapper">
            <ul className="navs">
              {menus &&
                menus.map((menu, index) => {
                  return (
                    <li
                      className="nav"
                      onClick={() => {
                        toPage(menu.name);
                      }}
                      key={menu.name}
                    >
                      <a className="link" href="#!">
                        <span>{menu.label}</span>
                        <i
                          className="fa fa-chevron-down"
                          aria-hidden="true"
                        ></i>
                      </a>
                      {menu.children && menu.children.length > 0 && (
                        <div className="sub-menus">
                          {menu.children.map((item) => {
                            return (
                              <nav
                                className="sub-menu"
                                key={item.name}
                                onClick={() =>
                                  toPage(`${menu.name}/${item.name}`)
                                }
                              >
                                <a className="link" href="#!">
                                  {item.label}
                                </a>
                              </nav>
                            );
                          })}
                        </div>
                      )}
                    </li>
                  );
                })}
            </ul>
          </section>
        </div>
      </section>
    </header>
  );
}

export default Menubar;
